<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习资讯 - LearnHub</title>
    <style>
        /* 共用样式与首页相同，此处省略 */
        .news-container {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 2rem;
            padding: 2rem;
        }
        .main-news {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .main-news-image {
            height: 400px;
            background-size: cover;
            background-position: center;
        }
        .main-news-content {
            padding: 2rem;
        }
        .news-tags {
            display: flex;
            gap: 0.5rem;
            margin: 1rem 0;
        }
        .tag {
            padding: 0.3rem 0.8rem;
            background: #f0f0f0;
            border-radius: 20px;
            font-size: 0.8rem;
        }
        .news-sidebar {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        .sidebar-card {
            background: white;
            border-radius: 8px;
            padding: 1.5rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .news-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2rem;
            padding: 2rem;
        }
        .news-item {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .news-item-image {
            height: 200px;
            background-size: cover;
            background-position: center;
        }
        .news-item-content {
            padding: 1.5rem;
        }
        .news-meta {
            display: flex;
            justify-content: space-between;
            color: #666;
            font-size: 0.9rem;
            margin: 0.5rem 0;
        }
        .trending-list {
            list-style: none;
            padding: 0;
        }
        .trending-item {
            padding: 0.8rem 0;
            border-bottom: 1px solid #eee;
        }
        .trending-item:last-child {
            border-bottom: none;
        }
        .trending-item a {
            color: var(--dark-color);
            text-decoration: none;
        }
        .trending-item a:hover {
            color: var(--primary-color);
        }
        .newsletter-form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        .newsletter-form input {
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .newsletter-form button {
            padding: 0.8rem;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <div class="logo">LearnHub</div>
            <div class="nav-links">
                <a href="index.html">首页</a>
                <a href="courses.html">课程中心</a>
                <a href="news.html" class="active">学习资讯</a>
                <a href="community.html">学习社区</a>
                <div class="dropdown">
                    <button class="dropdown-btn">更多</button>
                    <div class="dropdown-content">
                        <a href="#">个人中心</a>
                        <a href="#">学习记录</a>
                        <a href="#">设置</a>
                    </div>
                </div>
            </div>
        </nav>
    </header>

    <section class="hero" style="background-image: url('https://images.unsplash.com/photo-1434030216411-0b793f4b4173?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');">
        <div class="hero-content">
            <h1>最新学习资讯</h1>
            <p>掌握前沿知识，了解行业动态</p>
            <div class="search-bar">
                <input type="text" placeholder="搜索资讯...">
                <button>搜索</button>
            </div>
        </div>
    </section>

    <div class="news-container">
        <div class="main-news">
            <div class="main-news-image" style="background-image: url('https://images.unsplash.com/photo-1503676260728-1c00da094a0b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');"></div>
            <div class="main-news-content">
                <div class="news-tags">
                    <span class="tag">技术</span>
                    <span class="tag">人工智能</span>
                    <span class="tag">前沿</span>
                </div>
                <h2>2025年人工智能十大趋势预测</h2>
                <p class="news-meta">
                    <span>作者: 张科技</span>
                    <span>发布于: 2025-09-20</span>
                </p>
                <p>随着技术的快速发展，人工智能正在改变我们生活和工作的方方面面。本文总结了2025年人工智能领域最值得关注的十大趋势，包括生成式AI的普及、AI伦理的重视、边缘AI的发展等...</p>
                <button style="padding: 0.8rem 1.5rem; background: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer; margin-top: 1rem;">阅读全文</button>
            </div>
        </div>
        <div class="news-sidebar">
            <div class="sidebar-card">
                <h3>热门资讯</h3>
                <ul class="trending-list">
                    <li class="trending-item"><a href="#">量子计算突破：中国科学家实现100量子比特纠缠</a></li>
                    <li class="trending-item"><a href="#">元宇宙教育：虚拟现实如何改变学习方式</a></li>
                    <li class="trending-item"><a href="#">2025年最值得学习的5种编程语言</a></li>
                    <li class="trending-item"><a href="#">远程工作时代：未来职场必备的10项技能</a></li>
                    <li class="trending-item"><a href="#">区块链在教育领域的应用前景分析</a></li>
                </ul>
            </div>
            <div class="sidebar-card">
                <h3>订阅资讯</h3>
                <p>订阅我们的电子报，获取最新的学习资讯和课程更新</p>
                <form class="newsletter-form">
                    <input type="email" placeholder="您的电子邮箱">
                    <button type="submit">订阅</button>
                </form>
            </div>
            <div class="sidebar-card">
                <h3>分类</h3>
                <ul class="trending-list">
                    <li class="trending-item"><a href="#">技术</a></li>
                    <li class="trending-item"><a href="#">商业</a></li>
                    <li class="trending-item"><a href="#">设计</a></li>
                    <li class="trending-item"><a href="#">科学</a></li>
                    <li class="trending-item"><a href="#">教育</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="news-list">
        <div class="news-item">
            <div class="news-item-image" style="background-image: url('https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');"></div>
            <div class="news-item-content">
                <div class="news-tags">
                    <span class="tag">编程</span>
                    <span class="tag">职业发展</span>
                </div>
                <h3>全栈开发者2025年技能指南</h3>
                <p class="news-meta">
                    <span>作者: 李编程</span>
                    <span>发布于: 2025-09-18</span>
                </p>
                <p>随着技术栈的不断演进，全栈开发者需要掌握哪些技能才能在2025年保持竞争力？本文详细分析了前端、后端和DevOps领域的最新趋势...</p>
                <button style="padding: 0.6rem 1.2rem; background: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer; margin-top: 1rem;">阅读全文</button>
            </div>
        </div>
        <div class="news-item">
            <div class="news-item-image" style="background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');"></div>
            <div class="news-item-content">
                <div class="news-tags">
                    <span class="tag">数据科学</span>
                    <span class="tag">工具</span>
                </div>
                <h3>2025年数据科学家必备工具盘点</h3>
                <p class="news-meta">
                    <span>作者: 王数据</span>
                    <span>发布于: 2025-09-15</span>
                </p>
                <p>从数据清洗到模型部署，现代数据科学家需要使用各种工具来提高工作效率。本文介绍了2025年最受欢迎的10大数据科学工具及其应用场景...</p>
                <button style="padding: 0.6rem 1.2rem; background: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer; margin-top: 1rem;">阅读全文</button>
            </div>
        </div>
        <div class="news-item">
            <div class="news-item-image" style="background-image: url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');"></div>
            <div class="news-item-content">
                <div class="news-tags">
                    <span class="tag">教育</span>
                    <span class="tag">未来</span>
                </div>
                <h3>在线教育未来五年发展趋势</h3>
                <p class="news-meta">
                    <span>作者: 赵教育</span>
                    <span>发布于: 2025-09-12</span>
                </p>
                <p>疫情加速了在线教育的发展，未来五年这一领域将如何演变？个性化学习、虚拟现实教学和AI助教将成为主流趋势...</p>
                <button style="padding: 0.6rem 1.2rem; background: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer; margin-top: 1rem;">阅读全文</button>
            </div>
        </div>
    </div>

    <footer>
        <p>© 2025 LearnHub 智能学习云平台. 保留所有权利.</p>
        <div style="margin-top: 1rem;">
            <a href="#" style="color: white; margin: 0 0.5rem;">关于我们</a>
            <a href="#" style="color: white; margin: 0 0.5rem;">联系我们</a>
            <a href="#" style="color: white; margin: 0 0.5rem;">隐私政策</a>
            <a href="#" style="color: white; margin: 0 0.5rem;">使用条款</a>
        </div>
    </footer>

    <script>
        // 共用JavaScript功能与首页相同，此处省略
    </script>
</body>
</html>